<template>
  <div>
    <div id="all_user">
      <vueWaterfallEasy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData" :maxCols="5">
        <div class="img-info" slot-scope="props">
          <p class="headline">服装在人类社会发展的早期就已出现，当时古人将一些材料做成粗陋的“衣服”，穿在身上。</p>
          <div class="goseesee">去看看</div>
          <p class="some-info">{{props.value.info}}</p>
        </div>
      </vueWaterfallEasy>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: { vueWaterfallEasy },
  data() {
    return {
      imgsArr: [
        {
          src: require("../../../assets/images_test/1.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/0.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/2.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/3.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/4.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/5.png"),
          href: "http://baidu.com"
        },
        {
          src: require("../../../assets/images_test/6.png"),
          href: "http://baidu.com"
        }
      ],
      fetchImgsArr: []
    };
  },
  methods: {
    fetchImgsData() {}
  }
};
</script>

<style lang="less" scoped>
#all_user {
  height: 1000px;
}
.img-info {
  margin: 10px;
  padding-bottom: 5px;
  .headline {
    font-size: 14px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
  .goseesee {
    width: 50px;
    height: 25px;
    background-color: #C30C22FF;
    font-size: 12px;
    color: aliceblue;
    line-height: 25px;
    text-align: center;
    margin-left: 110px;
    margin-top: 5px;
    border-radius: 10px;

  }
}
</style>>
